﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" /> 
<meta name="description" content="Restrict the jqxDateTimeInput navigation with the setMinDate and setMaxDate methods."/>
<title id='Description'>
Restrict the jqxDateTimeInput navigation with the setMinDate and setMaxDate methods. 
</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../scripts/gettheme.js"></script> 
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
 </head>
<body>
<div id='content'>
  <script type="text/javascript">
      $(document).ready(function () {
          var theme = '';
          // Create the jqxDateTimeInput.
          $("#jqxDateTimeInput").jqxDateTimeInput({ width: '250px', height: '25px', theme: theme });
          // restrict the navigation by setting minimum and maximum navigation dates.
          $("#jqxDateTimeInput").jqxDateTimeInput('setMinDate', new Date(2010, 0, 1));
          $("#jqxDateTimeInput").jqxDateTimeInput('setMaxDate', new Date(2013, 0, 1));
      });
  </script>  
  <div style='float: left' id='jqxWidget'>
    <div style='text-align: center; width: 250px; font-family: "Verdana", "sans-serif"; font-size: 13px;'>The navigation is restricted from 01/01/2010 to 01/01/2013</div>
    <br />
    <div id='jqxDateTimeInput'></div>
  </div>
</div>
</body>
</html>
